<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="webjars/bootstrap/css/bootstrap.css">


    <script src="webjars/jquery/jquery.js"></script>
    <script src="webjars/bootstrap/js/bootstrap.js"></script>

</head>
<body>
<p>
    <input type="text" id="send">
    <button type="button" class="btn btn-primary btn-lg" onclick="send()">发送消息到kafka</button>
    <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
    <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
    <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
    <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
    <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
    <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
    <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>

<button onclick="int=window.clearInterval(int)">停止</button>
<input type="text" id="clock" />

<h1 id="kafka" style="color:red;"></h1>

</body>
<script>
    var int=self.setInterval("clock()",1000);
    function clock()
    {
        var d=new Date();
        var t=d.toLocaleTimeString();

        document.getElementById("clock").value=t;

        $.get("/list",function (data) {
            console.log(data);
            $("#kafka").html(data);
        })
    }

    function send() {
        var param = $("#send").val().trim();
        if(param.length<1){
            alert("请输入发送的数据");
            return false
        }
        $.post("/redis",{str:param},function (data) {
            alert(data);
        })

    }
</script>

</html>